<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="drawer = true">新增</el-button>
      </el-col>
      <el-col :span="12">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input"
        ></el-input>
      </el-col>
    </el-row>
    <!--  -->
    <el-table :data="tableData" stripe style="width: 100%; margin-top: 15px">
      <el-table-column type="index" label="#" width="180"></el-table-column>
      <el-table-column prop="title" label="题目" width="400"></el-table-column>
      <el-table-column prop="cid" label="分类" width="180"></el-table-column>
      <el-table-column prop="uid" label="作者"></el-table-column>
      <el-table-column prop="created" label="发布时间"></el-table-column>
      <el-table-column width="300" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleClick(scope.row, '编辑')"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleClick(scope.row, '删除')"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--  -->
    <el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
    <!--  -->
    <el-drawer
      title="我是标题"
      size="60%"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div style="margin: 30px">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目">
            <el-input
              type="textarea"
              autosize
              :show-word-limit="true"
              v-model="form.title"
            ></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="form.cid" placeholder="请选择类别">
              <el-option
                v-for="(item, index) in classList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选项">
            <div class="dis" v-for="(item, index) in form.options" :key="index">
              <el-checkbox
                :label="item.index"
                v-model="form.answers"
              ></el-checkbox>
              <el-input
                type="textarea"
                :show-word-limit="true"
                autosize
                v-model="item.value"
                style="width: 80%"
              ></el-input>
              <template>
<!--  @click="addChoice" -->
                <el-button
                  v-if="index + 1 == form.options.length"
                  type="primary"
                  icon="el-icon-plus"
                 
                  @click="addChoice()"
                  circle
                ></el-button>
                <el-button
                  v-else-if="index + 1 >= 4"
                  type="success"
                  icon="el-icon-minus"
                  @click="reduceChoice(index)"
                  circle
                ></el-button>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="答案">
            <div>{{ doSort(form.answers).join(",") || "" }}</div>
          </el-form-item>
          <el-form-item label="答题提示">
            <el-input
              type="textarea"
              autosize
              :show-word-limit="true"
              v-model="form.tips"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button type="success">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  layout: "mian",
  data() {
    return {
      input: "",
      drawer: false,
      form: {
        answers: [],
        options: [
          { index: "A", value: "" },
          { index: "B", value: "" },
          { index: "C", value: "" },
          { index: "D", value: "" },
        ],
        uid: "1",
      },
      size:0
    };
  },
  watch: {
    drawer() {
      if (this.drawer == false) {
        this.form = {
          answers: [],
          options: [
            { index: "A", value: "" },
            { index: "B", value: "" },
            { index: "C", value: "" },
            { index: "D", value: "" },
          ],
          uid: "1",
        };
      }
    },
  },
  async mounted() {
    await this.renderList();

    console.log();
  },
  methods: {
    async renderList() {
      await this.$store.dispatch("question/randerText");
      await this.$store.dispatch("classify/getClassify");
    },
    async onSubmit() {
      await this.$store.dispatch("question/getSubmitText", this.form);
      this.renderList();
    },
    getLetterByIndex(index){
         
        console.log(ss );


    },
    // 增加选择
    addChoice() {
    
         this.size++

        // let ss= String.fromCharCode("D".charCodeAt(0)+ this.size)
         console.log(String.fromCharCode("D".charCodeAt(0)) );
             
      this.form.options.push({ index: ss, value: "" });
    },
    // 减少选择
    reduceChoice(index) {
      
      if (this.form.options.length <= 4) {
        this.$message({
          message: "至少有四个选项，不能再删了!!!",
          type: "warning",
        });
        return;
      }
      this.form.options.splice(index,1)
      // this.form.options.pop();
    },
    doSort(val) {
      let app = [...val];
      app.sort();
      return app;
    },
    async handleClick(row, val) {
      if (val == "修改") {
        await this.$store.dispatch("question/getDeleteText", row.id);
      }

      this.drawer = true;

      if( typeof(row.answers)=="string"){
        row.answers=row.answers.split(",")
      }

       row.answers=["A","B"]
      row.options = JSON.parse(row.options);
    
      this.form = row;
      console.log( this.form);
      this.renderList();
    },
  },
  computed: {
    ...mapState("question", ["tableData"]),
    ...mapState("classify", ["classList"]),
    classList() {
      return this.$store.state.classify.classList;
    },
  },
};
</script>

<style scoped>
</style>